<template>
	<div class="about">
		<searchFrom @on-refresh="refresh" height="55" @on-query="query(fromData)" @on-reset="reset(fromData)">
			<template v-slot:searchMenu>
				<el-form ref="fromData" :model="fromData" label-width="110px" inline>
					<el-form-item label="自定义搜索1">
						<el-input style="width:200px" v-model="fromData.data1" placeholder="自定义搜索框1"></el-input>
					</el-form-item>
					<el-form-item label="自定义搜索2">
						<el-input style="width:200px" v-model="fromData.data2" placeholder="自定义搜索框2"></el-input>
					</el-form-item>
					<el-form-item label="自定义搜索3">
						<el-input style="width:200px" v-model="fromData.data3" placeholder="自定义搜索框3"></el-input>
					</el-form-item>
				</el-form>
			</template>

			<template v-slot:searchMenuBtn>
				<el-button type="primary">自定义按钮</el-button>
			</template>

			<template v-slot:menuLeft>
				<el-button type="primary">自定义按钮1</el-button>
			</template>

			<template v-slot:menuRight>
				<el-button type="primary">自定义按钮2</el-button>
			</template>
		</searchFrom>
	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import searchFrom from "@/components/searchFrom.vue"; // @ is an alias to /src

export default defineComponent({
	name: "Home",
	components: {
		searchFrom
	},
	data() {
		return {
			fromData: {
				data1: "",
				data2: "",
				data3: ""
			}
		};
	},
	methods: {
		// searchFrom 刷新
		refresh() {
			console.log("刷新");
		},
		// 搜索
		query(fromData: any) {
			console.log(fromData, "搜索");
		},
		// // 重置
		reset(fromData: any) {
			Object.keys(fromData).forEach(key => (fromData[key] = ""));
		}
	}
});
</script>


<style lang="scss" scoped>
.about {
	// text-align: center;
	height: 100%;
	width: 100%;
	border: 1px solid #ebe5e5;
	// padding: 10px
}
</style>